<template>
  <view class="page-container bg-[#f5f5f5]">
    <view class="tab-wrapper bg-white">
      <view class="tab-container">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          class="tab-item"
          :class="{ active: currentTab === index }"
          @click="handleTabChange(index)"
        >
          {{ tab }}
        </view>
      </view>
    </view>

    <view
      v-if="questionList.length > 0"
      class="content-wrapper px-24rpx py-24rpx mt-20rpx bg-white h-[calc(100vh-352rpx)]"
    >
      <view class="grid grid-cols-2 gap-24rpx">
        <view
          v-for="(item, index) in questionList"
          :key="index"
          class="question-card"
          @click="navigateToDetail(item)"
        >
          <view class="card-content">
            <view></view>
            <view class="card-title">{{ item.repoName }}</view>
            <view class="card-footer">
              <text>试题总数: {{ item.quNum }}</text>
              <wd-icon name="a-chevron-rightdouble" size="20px" color="#3670F7"></wd-icon>
            </view>
          </view>
        </view>
      </view>
      <!-- 添加加载状态和加载完成的提示 -->
      <wd-loadmore :state="state" @reload="loadMore" finished-text="已经全部加载完毕"></wd-loadmore>
    </view>

    <view v-else class="empty-state flex-center flex-col mt-200rpx">
      <wd-status-tip :image="emptyImage" tip="暂无数据" />
    </view>
  </view>
</template>

<script setup lang="ts">
/* 引入 接口 */
import { getTeacherListApi, getPublicListApi } from '@/service/edu/question/index'
/* 引入 暂无数据 - 图片 */
import emptyImage from '@/static/images/icons/empty.png'

const currentTab = ref(0)
const tabs = ['老师题库', '公共题库']

const state = ref<'loading' | 'finished' | 'error'>('loading')
const loading = ref(false)
const finished = ref(false)

/* 定义 题库-列表数组(后台返回) */
const questionList = ref<any[]>([])
/* 定义 分页配置 */
const pageNum = ref(1)
const pageSize = ref(10)

/* 获取 题库列表数据 */
async function getList(isLoadMore = false) {
  if (loading.value || (finished.value && isLoadMore)) return
  try {
    loading.value = true
    const params = {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    }

    const apiEnum = {
      0: getTeacherListApi,
      1: getPublicListApi,
    }

    /* 判断调取哪个接口 */
    const data: any = await apiEnum[currentTab.value](params)
    if (data?.code === 200) {
      const { rows = [], total = 0 } = data || {}

      if (isLoadMore) {
        questionList.value = [...questionList.value, ...rows]
      } else {
        questionList.value = rows
      }

      // 判断是否加载完所有数据
      finished.value = questionList.value.length >= total
      state.value = finished.value ? 'finished' : 'loading'
    }
  } catch (error) {
    console.error('获取我的题库失败:', error)
    state.value = 'error'
  } finally {
    loading.value = false
  }
}

/* 加载更多数据 */
const loadMore = async () => {
  if (!loading.value && !finished.value) {
    pageNum.value++
    await getList(true)
  }
}

/* 监听页面滚动到底部 */
onReachBottom(() => {
  if (!loading.value && !finished.value) {
    loadMore()
  }
})

const handleTabChange = async (index: number) => {
  currentTab.value = index
  await getList()
}

const navigateToDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/question/details/index?repoId=${item.repoId}&title=${encodeURIComponent(item.repoName)}&type=${currentTab.value}`,
  })
}

/* 页面加载时获取数据 */
onLoad(async () => {
  await getList(false)
})
</script>

<style lang="scss" scoped>
.tab-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  border-top: 1rpx solid #e6e6e6;

  .tab-container {
    display: flex;
    gap: 32rpx;
    padding: 20rpx 32rpx;

    .tab-item {
      position: relative;
      width: 170rpx;
      height: 54rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 54rpx;
      color: #333333;
      text-align: center;
      background: #d8d8d8;
      border-radius: 10rpx;

      &.active {
        color: #3670f7;
        background: #d9f8ec;
      }
    }
  }
}

.question-card {
  height: 255rpx;
  margin-top: 10rpx;
  background: rgba(0, 204, 126, 0.05);
  border: 2rpx solid rgba(0, 204, 126, 0.1);
  border-top: 10rpx solid #3670f7;
  border-radius: 16rpx;
  transition: all 0.2s ease;

  .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
  }

  .card-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #3d3d3d;
    text-align: center;
  }

  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;

    text {
      font-size: 22rpx;
      color: #333333;
    }
  }

  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-header {
  position: relative;
  padding: 24rpx 0;
  margin-bottom: 80rpx;
  text-align: center;

  .more-info {
    position: relative;
    padding: 0 24rpx;
    font-size: 24rpx;
    color: #999999;
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 2rpx;
    content: '';
    background: #eee;
    transform: translateY(-50%);
  }
}
</style>
